import { useEffect, useState } from "react";
import { type KlineDataItem } from "~/api/stock";
import KlineChart from "@components/stock/KlineChart";
import "./App.css";

function App() {
  // K线图相关状态 - 临时注释，测试收藏按钮
  const [klineData, setKlineData] = useState<KlineDataItem[]>([]);
  const [klineLoading, setKlineLoading] = useState<boolean>(false);

  // 获取K线数据 - 临时注释，测试收藏按钮
  const fetchKlineData = async () => {
    try {
      setKlineLoading(true);

      const response = await fetch("/api/stock/kline_data").then((res) => {
        return res.json();
      });

      console.log("获取K线数据:", response);

      setKlineData(response.data);
    } catch (error) {
      console.error("获取K线数据失败:", error);
      // API失败时不显示错误提示，让组件使用模拟数据
      // Toast.show('获取K线数据失败');
      setKlineData([]); // 设置为空数组，让组件使用模拟数据
    } finally {
      setKlineLoading(false);
    }
  };

  useEffect(() => {
    fetchKlineData();
  }, []);

  return (
    <>
      {/* 股票详情-模拟 */}
      <div style={{ height: 200, width: "100%", backgroundColor: "#fafafa",border:"1px solid #d9d9d9" }}></div>
      {/* K线图 */}
      <div
        style={{
          margin: "16px 0 0",
          padding: "12px",
        }}
      >
        <div>
          <KlineChart data={klineData} loading={klineLoading} />
        </div>
      </div>
      {/* 其他信息-模拟 */}
      <div style={{ height: 300, width: "100%", backgroundColor: "#fafafa",border:"1px solid #d9d9d9" }}></div>
    </>
  );
}

export default App;
